<template>
  <div class="test-map">
    <AMapComponents
      ref="locationMap"
      :is-modify="true"
      :center="center"
      :defalutModifyList="defalutModifyList"
    />
  </div>
</template>
<script>
import AMapComponents from '@/components/AMapComponents'
export default {
  name: 'TestMap',
  props: {
    setHeaderTitle: Function,
    setHeaderLeft: Function,
    setHeaderRight: Function
  },
  components: {
    AMapComponents
  },
  computed: {
    defalutModifyList () {
      return this.$route.query.defaultLocation && JSON.parse(this.$route.query.defaultLocation)
    },
    // 中心点
    center () {
      return (this.$route.query.type === 'location' && this.defalutModifyList) ? this.defalutModifyList[0].lnglat : []
    }
  },
  mounted () {
    console.log('testMap', this.$route)
    this.setHeaderTitle('定图定位22')
    this.setHeaderRight({ handle: () => { this.submit() }, label: '确定', path: '/testMap' })
    // 自定义返回路由跳转
    this.setHeaderLeft(() => {
      console.log('自定义返回路由跳转')
      this.$router.push({
        path: '/'
      })
    })
  },
  methods: {
    submit () {
      console.log('点击确定')
      const locationObj = JSON.stringify(this.$refs.locationMap.markerList[0].regeocode)
      console.log(666, locationObj)
      this.$router.push({
        path: '/',
        query: { locationObj }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.test-map {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>
